<template>
  <div>
    <!--<Card id="html2canvas">-->
    <!--<Tabs :animated="false">-->
    <!--<TabPane label="工具类" id="printjs">-->
    <!--<Divider orientation="left">打印 - Print.js</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/crabbly/Print.js"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/crabbly/Print.js</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="http://printjs.crabbly.com"-->
    <!--target="_blank"-->
    <!--&gt;http://printjs.crabbly.com</a>-->
    <!--<br>-->

    <!--<Button @click="printHtml" class="example-btn">打印网页示例</Button>-->
    <!--<Button @click="printJson" class="example-btn">打印Json数据示例</Button>-->

    <!--<Divider orientation="left">截屏 - html2canvas</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/niklasvh/html2canvas"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/niklasvh/html2canvas</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="https://html2canvas.hertzen.com"-->
    <!--target="_blank"-->
    <!--&gt;https://html2canvas.hertzen.com</a>-->
    <!--<br>-->

    <!--<Button @click="html2canvas" class="example-btn">截取网页示例</Button>-->
    <!--<Button @click="html2canvas2" class="example-btn">截取指定内容示例</Button>-->

    <!--<Divider orientation="left">打印 + 截屏 实现网页样式不丢失打印</Divider>-->
    <!--<Button @click="html2canvas3" class="example-btn">打印原样式网页图片示例</Button>-->

    <!--<Divider orientation="left">复制命令 - vue-clipboard2</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/Inndy/vue-clipboard2"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/Inndy/vue-clipboard2</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="https://github.com/Inndy/vue-clipboard2"-->
    <!--target="_blank"-->
    <!--&gt;https://github.com/Inndy/vue-clipboard2</a>-->
    <!--<br>-->
    <!--<Button-->
    <!--v-clipboard:copy="content"-->
    <!--v-clipboard:success="onCopy"-->
    <!--v-clipboard:error="onError"-->
    <!--class="example-btn"-->
    <!--&gt;复制文本示例</Button>-->
    <!--<Input-->
    <!--type="textarea"-->
    <!--:autosize="{minRows: 2,maxRows: 5}"-->
    <!--style="width:300px"-->
    <!--placeholder="粘贴测试"-->
    <!--/>-->

    <!--<Divider orientation="left">轻量级时间转换工具 - date-fns</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/date-fns/date-fns"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/date-fns/date-fns</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a class="href-text" href="https://date-fns.org" target="_blank">https://date-fns.org</a>-->
    <!--<br>-->

    <!--<span class="href-text">示例：{{time}}</span>-->

    <!--<Divider orientation="left">图片懒加载 - vue-lazyload</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/hilongjw/vue-lazyload"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/hilongjw/vue-lazyload</a>-->
    <!--<br>-->
    <!--<span class="href-text">官网：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="http://hilongjw.github.io/vue-lazyload"-->
    <!--target="_blank"-->
    <!--&gt;http://hilongjw.github.io/vue-lazyload</a>-->
    <!--<br>-->
    <!--</TabPane>-->

    <!--<TabPane label="组件类">-->
    <!--<Divider orientation="left">省市县级联组件 - iView Area</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/iview/iview-area"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/iview/iview-area</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="https://iview.github.io/iview-area"-->
    <!--target="_blank"-->
    <!--&gt;https://iview.github.io/iview-area</a>-->
    <!--<br>-->

    <!--&lt;!&ndash;<al-selector v-model="resArr" class="example-btn" style="width: 800px"/>&ndash;&gt;-->
    <!--&lt;!&ndash;{{resArr}}&ndash;&gt;-->
    <!--&lt;!&ndash;<al-cascader v-model="resArr2" class="example-btn" style="width: 400px"/>&ndash;&gt;-->
    <!--&lt;!&ndash;{{resArr2}}&ndash;&gt;-->
    <!--<Divider orientation="left">树表格 - tree-table-vue</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/lison16/tree-table-vue"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/lison16/tree-table-vue</a>-->
    <!--<br>-->
    <!--<br>-->

    <!--<div class="operation">-->
    <!--<Button icon="md-add">添加一级节点</Button>-->
    <!--<Button icon="md-refresh">刷新</Button>-->
    <!--</div>-->
    <!--<Alert show-icon>-->
    <!--已选择-->
    <!--<span class="select-count">{{selectCount}}</span> 项-->
    <!--这里还可以做一些数据统计显示-->
    <!--</Alert>-->
    <!--<tree-table-->
    <!--ref="treeTable"-->
    <!--index-text="#"-->
    <!--:data="tableData"-->
    <!--:columns="columns"-->
    <!--:stripe="props.stripe"-->
    <!--:border="props.border"-->
    <!--:show-header="props.showHeader"-->
    <!--:show-summary="props.showSummary"-->
    <!--:show-row-hover="props.showRowHover"-->
    <!--:show-index="props.showIndex"-->
    <!--:tree-type="props.treeType"-->
    <!--:is-fold="props.isFold"-->
    <!--:expand-type="props.expandType"-->
    <!--expand-key="name"-->
    <!--select-type="checkbox"-->
    <!--@radio-click="handleRadioClick"-->
    <!--:selectable="props.selectable"-->
    <!--&gt;-->
    <!--<template slot="$expand" slot-scope="scope">-->
    <!--{{ `我的姓名是 ${scope.row.name},-->
    <!--这一行的索引是 ${scope.rowIndex}.`-->
    <!--}}-->
    <!--</template>-->
    <!--<template slot="action" slot-scope="scope">-->
    <!--<Button-->
    <!--type="primary"-->
    <!--@click="click(scope.row)"-->
    <!--size="small"-->
    <!--icon="md-add"-->
    <!--style="margin-right:5px"-->
    <!--&gt;添加子节点</Button>-->
    <!--<Button-->
    <!--size="small"-->
    <!--@click="click(scope.row)"-->
    <!--icon="ios-create-outline"-->
    <!--style="margin-right:5px"-->
    <!--&gt;编辑</Button>-->
    <!--<Button type="error" @click="click(scope.row)" size="small" icon="md-trash">删除</Button>-->
    <!--</template>-->
    <!--</tree-table>-->

    <!--<Divider orientation="left">图片裁剪 - vue-cropper</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/xyxiao001/vue-cropper"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/xyxiao001/vue-cropper</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="http://xyxiao.cn/vue-cropper/example"-->
    <!--target="_blank"-->
    <!--&gt;http://xyxiao.cn/vue-cropper/example</a>-->
    <!--<br>-->
    <!--<br>-->

    <!--<vueCropper-->
    <!--style="height:300px;width:500px"-->
    <!--ref="cropper"-->
    <!--:img="option.img"-->
    <!--:outputType="option.outputType"-->
    <!--autoCrop-->
    <!--@realTime="realTime"-->
    <!--&gt;</vueCropper>-->

    <!--<br>-->
    <!--<div :style="previewStyle">-->
    <!--<div :style="previews.div">-->
    <!--<img :src="previews.url" :style="previews.img">-->
    <!--</div>-->
    <!--</div>-->
    <!--<br>-->
    <!--<Alert type="warning" show-icon style="width:500px">base64上传，上传接口传入参数base64即可</Alert>-->
    <!--<Button-->
    <!--type="primary"-->
    <!--@click="upload"-->
    <!--:loading="uploadLoading"-->
    <!--icon="ios-cloud-upload-outline"-->
    <!--&gt;上传裁剪后的图片</Button>-->

    <!--<Divider orientation="left">弹幕视频播放器 - DPlayer</Divider>-->
    <!--<span class="href-text">Github：</span>-->
    <!--<a-->
    <!--href="https://github.com/MoePlayer/DPlayer"-->
    <!--target="_blank"-->
    <!--class="href-text"-->
    <!--&gt;https://github.com/MoePlayer/DPlayer</a>-->
    <!--<br>-->
    <!--<span class="href-text">官方文档：</span>-->
    <!--<a class="href-text" href="http://dplayer.js.org" target="_blank">http://dplayer.js.org</a>-->
    <!--<br>-->
    <!--<span class="href-text">自己搭建弹幕服务：</span>-->
    <!--<a-->
    <!--class="href-text"-->
    <!--href="https://github.com/MoePlayer/DPlayer-node"-->
    <!--target="_blank"-->
    <!--&gt;https://github.com/MoePlayer/DPlayer-node</a>-->
    <!--<br>-->
    <!--<br>-->

    <!--<div id="dplayer" style="width:600px;height:400px"></div>-->
    <!--</TabPane>-->
    <!--</Tabs>-->
    <!--</Card>-->

    <!--<Modal title="截屏预览" v-model="modalVisible" :width="1000">-->
    <!--<img id="render" :src="imgUrl" width="100%" height="500px">-->
    <!--<div slot="footer">-->
    <!--<Button type="primary" @click="printPic" v-if="showPrintImage">打印图片</Button>-->
    <!--<Button @click="modalVisible=false">关闭</Button>-->
    <!--</div>-->
    <!--</Modal>-->
  </div>
</template>

<script>
// 组件内使用
// import { VueCropper } from "vue-cropper";
// import printJS from "print-js";
// import html2canvas from "html2canvas";
// import { format } from "date-fns";
// // import "dplayer/dist/DPlayer.min.css";
// // import DPlayer from "dplayer";
// import { base64Upload } from "@/api/index.js";
export default {
  name: "xboot-library"
  // components: {
  //   VueCropper
  // },
  // data() {
  //   return {
  //     resArr: [],
  //     resArr2: [],
  //     modalVisible: false,
  //     imgUrl: "",
  //     showPrintImage: false,
  //     content: "测试文本内容",
  //     time: "",
  //     data: [
  //       {
  //         id: "1",
  //         name: "X-BOOT",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00"
  //       },
  //       {
  //         id: "2",
  //         name: "Exrick",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00"
  //       }
  //     ],
  //     selectCount: 0,
  //     props: {
  //       stripe: false,
  //       border: true,
  //       showHeader: true,
  //       showSummary: false,
  //       showRowHover: true,
  //       showIndex: true,
  //       treeType: true,
  //       isFold: true,
  //       expandType: true,
  //       selectable: true
  //     },
  //     ids: "",
  //     tableData: [
  //       {
  //         id: 1,
  //         name: "Jack",
  //         sex: "男",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00",
  //         children: [
  //           {
  //             id: 2,
  //             name: "Ashley",
  //             sex: "女",
  //             createTime: "2018-08-08 00:08:00",
  //             updateTime: "2018-08-08 00:08:00",
  //             children: [
  //               {
  //                 id: 3,
  //                 name: "Ashley",
  //                 sex: "女",
  //                 createTime: "2018-08-08 00:08:00",
  //                 updateTime: "2018-08-08 00:08:00"
  //               },
  //               {
  //                 id: 4,
  //                 name: "Taki",
  //                 sex: "男",
  //                 createTime: "2018-08-08 00:08:00",
  //                 updateTime: "2018-08-08 00:08:00"
  //               }
  //             ]
  //           },
  //           {
  //             id: 5,
  //             name: "Taki",
  //             sex: "男",
  //             createTime: "2018-08-08 00:08:00",
  //             updateTime: "2018-08-08 00:08:00"
  //           }
  //         ]
  //       },
  //       {
  //         id: 6,
  //         name: "Tom",
  //         sex: "男",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00",
  //         children: [
  //           {
  //             id: 7,
  //             name: "Ashley",
  //             sex: "女",
  //             createTime: "2018-08-08 00:08:00",
  //             updateTime: "2018-08-08 00:08:00"
  //           }
  //         ]
  //       },
  //       {
  //         id: 8,
  //         name: "Tom",
  //         sex: "男",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00"
  //       },
  //       {
  //         id: 9,
  //         name: "Tom",
  //         sex: "男",
  //         createTime: "2018-08-08 00:08:00",
  //         updateTime: "2018-08-08 00:08:00",
  //         children: [
  //           {
  //             id: 10,
  //             name: "Ashley",
  //             sex: "女",
  //             createTime: "2018-08-08 00:08:00",
  //             updateTime: "2018-08-08 00:08:00"
  //           }
  //         ]
  //       }
  //     ],
  //     columns: [
  //       {
  //         title: "姓名",
  //         key: "name",
  //         minWidth: "200px"
  //       },
  //       {
  //         title: "性别",
  //         key: "sex",
  //         headerAlign: "center",
  //         align: "center",
  //         minWidth: "50px"
  //       },
  //       {
  //         title: "创建时间",
  //         key: "createTime",
  //         headerAlign: "center",
  //         align: "center",
  //         minWidth: "200px"
  //       },
  //       {
  //         title: "更新时间",
  //         key: "updateTime",
  //         headerAlign: "center",
  //         align: "center",
  //         minWidth: "200px"
  //       },
  //       {
  //         title: "操作",
  //         key: "action",
  //         headerAlign: "center",
  //         align: "center",
  //         width: "250px",
  //         type: "template",
  //         template: "action"
  //       }
  //     ],
  //     option: {
  //       img: "https://i.loli.net/2019/03/12/5c87521fb8ae9.jpeg",
  //       outputType: "png"
  //     },
  //     previews: "",
  //     previewStyle: {},
  //     uploadLoading: false
  //   };
  // },
  // methods: {
  //   init() {
  //     this.time = format(new Date(), "YYYY-MM-DD");
  //     this.initVideo();
  //   },
  //   printHtml() {
  //     printJS("printjs", "html");
  //   },
  //   printJson() {
  //     printJS({
  //       printable: this.data,
  //       header: "用户数据",
  //       gridStyle: "border: 1px solid lightgray;text-align:center",
  //       properties: ["id", "name", "createTime", "updateTime"],
  //       type: "json"
  //     });
  //   },
  //   html2canvas() {
  //     let that = this;
  //     html2canvas(document.body).then(function(canvas) {
  //       that.imgUrl = canvas.toDataURL("image/jpeg");
  //     });
  //     this.modalVisible = true;
  //     this.showPrintImage = false;
  //   },
  //   html2canvas2() {
  //     let that = this;
  //     html2canvas(document.getElementById("html2canvas")).then(function(
  //       canvas
  //     ) {
  //       that.imgUrl = canvas.toDataURL("image/jpeg");
  //     });
  //     this.modalVisible = true;
  //     this.showPrintImage = false;
  //   },
  //   html2canvas3() {
  //     let that = this;
  //     html2canvas(document.body).then(function(canvas) {
  //       that.imgUrl = canvas.toDataURL("image/jpeg");
  //     });
  //     this.modalVisible = true;
  //     this.showPrintImage = true;
  //   },
  //   printPic() {
  //     printJS({
  //       printable: "render",
  //       type: "html",
  //       header: "图片数据"
  //     });
  //   },
  //   onCopy() {
  //     this.$Message.success("复制成功");
  //   },
  //   onError() {
  //     this.$Message.warning("复制失败，请手动复制");
  //   },
  //   handleRadioClick(v) {
  //     this.selectCount = this.$refs.treeTable.getCheckedProp().length;
  //   },
  //   click(v) {
  //     this.$Message.info("点击数据ID为：" + v.id);
  //   },
  //   initVideo(v) {
  //     const dp = new DPlayer({
  //       container: document.getElementById("dplayer"),
  //       screenshot: true,
  //       video: {
  //         url:
  //           "https://cloud.video.taobao.com//play/u/95292294/p/1/e/6/t/1/210877258798.mp4"
  //       },
  //       danmaku: {
  //         id: "弹幕ID210877258798",
  //         api: "https://api.prprpr.me/dplayer/"
  //       }
  //     });
  //   },
  //   // 实时预览
  //   realTime(data) {
  //     let preview = data,
  //       h = 0.5;
  //     this.previewStyle = {
  //       width: preview.w + "px",
  //       height: preview.h + "px",
  //       overflow: "hidden",
  //       margin: "0",
  //       zoom: h
  //     };
  //     this.previews = data;
  //   },
  //   upload() {
  //     // 获取截图的base64 数据
  //     this.$refs.cropper.getCropData(data => {
  //       this.uploadLoading = true;
  //       base64Upload({ base64: data }).then(res => {
  //         this.uploadLoading = false;
  //         if (res.success) {
  //           this.$Message.success("上传成功");
  //         }
  //       });
  //     });
  //   }
  // },
  // mounted() {
  //   this.init();
  // }
};
</script>

<style lang="less">
.href-text {
  font-size: 12px;
}
.example-btn {
  margin: 10px 0;
  display: block;
}
.operation {
  margin-bottom: 2vh;
}
.select-count {
  font-size: 13px;
  font-weight: 600;
  color: #40a9ff;
}
</style>
